<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <script>
      (function () {
        var metaE1 = document.createElement("meta");
        var scale = devicePixelRatio;
        metaE1.setAttribute("name", "viewport");
        metaE1.setAttribute(
          "content",
          "initial-scale" +
            1 / scale +
            ",maximum-scale=" +
            1 / scale +
            ", minimum-scale=" +
            1 / scale +
            ", user-scalable=no"
        );
      })();
    </script>
    <!-- 
      比例单位
      1. rem = 1 root(html) font-size
     -->
    <style>
      #box {
        display: flex;
      }
      #box div{ 
        width: 46.4vw;
        height: 24vw;
        background-color: red;
        font-size: 5vw;
      }
      #box div:nth-of-type(1) {
        margin: 0 2.133vw 0 2.667vw;
      }
      nav {
        display: flex;
      }
      nav a {
        margin: 0 4px;
        font-size: 3.2vw;
        text-decoration: none;
      }
      @media all and (max-width:640px) {
        nav a {
          color: green;
        }
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div>尖货</div>
      <div>直播</div>
    </div>
    <nav>

    </nav>
  </body>
</html>
